﻿@page "/diagram/radial-tree"

@using Syncfusion.Blazor.Diagrams
@using Syncfusion.Blazor.Navigations
@using System.Collections.ObjectModel
@inherits SampleBaseComponent;

<SampleDescription>
   <p> This sample demonstrates a huge organizational structure using a compact layout model. A radial tree layout algorithm is used to build such a layout.</p> 
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
    <p>
        This example shows how to visualize complex hierarchical data using a radial tree layout algorithm that arranges the nodes in a circular structure.
        The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type'>Type</a> property of the layout can be used to enable the radial tree layout.
        The spacing between the objects can also be customized in the tree.
        The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_HorizontalAlignment'>HorizontalSpacing</a> and <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_VerticalSpacing'>VerticalSpacing</a> properties of <a target='_blank' href='https://blazor.syncfusion.com/documentation/diagram/layout/radial-tree-layout/'>Layout</a> can be used to customize the space between the objects in a tree.
    </p><br>
</ActionDescription>

@*Hidden:Lines*@
<style>
        @@font-face {
            font-family: 'e-ddb-icons';
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .e-ddb-icons {
            font-family: 'e-ddb-icons';
            speak: none;
            font-size: 55px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .e-zoomin::before {
            content: "\e70c";
        }

        .e-zoomout::before {
            content: "\e70d";
        }

        .e-reset::before {
            content: "\e715";
        }

        .material .e-zoomin::before {
            content: "\e700";
        }

        .material .e-zoomout::before {
            content: "\e701";
        }

        .material .e-reset::before {
            content: "\e70a";
        }

        .bootstrap .e-zoomin::before {
            content: "\e718";
        }

        .bootstrap .e-zoomout::before {
            content: "\e719";
        }

        .bootstrap .e-reset::before {
            content: "\e722";
        }
</style>
<div class="control-section">
    <div style="width: 100%;height: 10%">
        <SfToolbar>
            <ToolbarItems>
                <ToolbarItem Text="Zoom In" TooltipText="ZoomIn" OnClick="ZoominDiagram" PrefixIcon="e-ddb-icons e-zoomin"></ToolbarItem>
                <ToolbarItem Type="@ItemType.Separator" />
                <ToolbarItem Text="Zoom Out" TooltipText="ZoomOut" OnClick="ZoomoutDiagram" PrefixIcon="e-ddb-icons e-zoomout"></ToolbarItem>
                @*<ToolbarItem Type="@ItemType.Separator" />
                <ToolbarItem Text="Reset" TooltipText="Reset" OnClick="ResetDiagram" PrefixIcon="e-ddb-icons e-reset"></ToolbarItem>
                <ToolbarItem Type="@ItemType.Separator" />*@
            </ToolbarItems>
        </SfToolbar>
    </div>
    @*End:Hidden*@
    @*Hidden:Lines*@
    <div style="width: 100%;height: 80%">
        <div id="diagram-space" class="sb-mobile-diagram">
            @*End:Hidden*@
            <div class="content-wrapper">
                <SfDiagram @ref="@Diagram" ID="diagram" Height="600px" Layout="@Layout" ModelType="@Model" Tool="DiagramTools.ZoomPan" NodeDefaults="@Nodedefault">
                    <DiagramDataSource Id="Id" ParentId="ReportingPerson" DataSource="@DataSource">
                        <DiagramDataMapSettings>
                            <DiagramDataMapSetting Property="width" Field="Width"></DiagramDataMapSetting>
                            <DiagramDataMapSetting Property="height" Field="Height"></DiagramDataMapSetting>
                            <DiagramDataMapSetting Property="style.fill" Field="Fillcolor"></DiagramDataMapSetting>
                            <DiagramDataMapSetting Property="shape.BasicShape" Field="Shape"></DiagramDataMapSetting>
                            <DiagramDataMapSetting Property="Annotations[0].Content" Field="Name"></DiagramDataMapSetting>
                            <DiagramDataMapSetting Property="tooltip.content" Field="Tooltip"></DiagramDataMapSetting>
                            <DiagramDataMapSetting Property="Annotations[0].Style.Color" Field="Color"></DiagramDataMapSetting>
                            <DiagramDataMapSetting Property="Annotations[0].Style.FontSize" Field="FontSize"></DiagramDataMapSetting>
                        </DiagramDataMapSettings>
                    </DiagramDataSource>
                    <DiagramPageSettings>
                        <DiagramFitOptions CanFit="true" Mode="FitModes.Height"></DiagramFitOptions>
                    </DiagramPageSettings>
                    <DiagramSnapSettings Constraints="SnapConstraints.None"></DiagramSnapSettings>
                </SfDiagram>
            </div>
            @*Hidden:Lines*@
        </div>
    </div>
</div>
@*End:Hidden*@

@code{
    SfDiagram Diagram;
    public Type Model = typeof(Node);
    public class Node
    {
        public string Id { get; set; }
        public RadialTreeModel Data { get; set; }
    };

    public async Task ZoominDiagram()
    {
        ZoomOptions ZoomIn = new ZoomOptions()
        {
            Type = ZoomTypes.ZoomIn,
            ZoomFactor = 0.2
        };
        await Diagram.ZoomTo(ZoomIn);
    }
    public async Task ZoomoutDiagram()
    {
        ZoomOptions ZoomOut = new ZoomOptions()
        {
            Type = ZoomTypes.ZoomOut,
            ZoomFactor = 0.2
        };
        await Diagram.ZoomTo(ZoomOut);
    }
    public async Task ResetDiagram()
    {
        await Diagram.Reset();
        await Diagram.FitToPage();
    }
    public class RadialTreeModel
    {
        public string Id;
        public string Name;
        public string Designation;
        public string ReportingPerson;
        public double Width;
        public double Height;
        public string Shape;
        public string Fillcolor;
        public string Tooltip;
        public string Color;
        public string FontSize;
    };

    DiagramNode Nodedefault = new DiagramNode()
    {

        Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
            new DiagramNodeAnnotation()
            {
                Content = "",
            },
        },
        Tooltip = new NodeTooltip()
        {
            Content = "",
            RelativeMode = TooltipRelativeMode.Object,
            Position = Syncfusion.Blazor.Popups.Position.TopCenter,
            ShowTipPointer = true
        },
        Constraints = NodeConstraints.Default & ~NodeConstraints.InheritTooltip | NodeConstraints.Tooltip
    };

    public object DataSource = new List<object>()
{
        new RadialTreeModel { Id="parent",Name="Maria Anders",Designation="Managing Director",Width =400,Height=400,Shape="Ellipse",Fillcolor="black",Tooltip="Maria Anders <br/> Managing Director",Color="white",FontSize="50"},
        new RadialTreeModel { Id="1",Name="Ana Trujillo",Designation="Project Manager",ReportingPerson="parent",Width =130,Height=130,Shape="Rectangle",Fillcolor="#f8ab52",Tooltip="Ana Trujillo <br/> Project Manager",Color="black",FontSize="20"},
        new RadialTreeModel { Id="2",Name="Lino Rodri",Designation="Project Manager",ReportingPerson="parent",Width =130,Height=130,Shape="Rectangle",Fillcolor="#f8ab52",Tooltip="Lino Rodri <br/> Project Manager",Color="black",FontSize="20"},
        new RadialTreeModel { Id="3",Name="Philip Cramer",Designation="Project Manager",ReportingPerson="parent",Width =130,Height=130,Shape="Rectangle",Fillcolor="#f8ab52",Tooltip="Philip Cramer<br/> Project Manager",Color="black",FontSize="20" },
        new RadialTreeModel { Id="4",Name="Pedro Afonso",Designation="Project Manager",ReportingPerson="parent",Width =130,Height=130,Shape="Rectangle",Fillcolor="#f8ab52",Tooltip="Pedro Afonso<br/> Project Manager",Color="black",FontSize="20" },
        new RadialTreeModel { Id="5",Name="Anto \n Moreno",Designation="Project Lead",ReportingPerson="1",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Anto Moreno<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="6",Name="Elizabeth \n Roel",Designation="Project Lead",ReportingPerson="1",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Elizabeth Roel<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="7",Name="Aria \n Cruz",Designation="Project Lead",ReportingPerson="1",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Aria Cruz<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="8",Name="Eduardo \n Roel",Designation="Project Lead",ReportingPerson="1",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Eduardo Roel<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="9",Name="Howard \n Snyd",Designation="Project Lead",ReportingPerson="2",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Howard Snyd<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="10",Name="Daniel \n Tonini",Designation="Project Lead",ReportingPerson="2",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Daniel Tonini<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="11",Name="Nardo \n Batista",Designation="Project Lead",ReportingPerson="89",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Nardo Batista<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="12",Name="Michael \n Holz",Designation="Project Lead",ReportingPerson="89",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Michael Holz<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="13",Name="Kloss\n Perrier",Designation="Project Lead",ReportingPerson="90",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Kloss Perrier<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="14",Name="Liz \n  Nixon",Designation="Project Lead",ReportingPerson="3",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Liz Nixon<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="15",Name="Paul \n  Henriot",Designation="Project Lead",ReportingPerson="3",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Paul Henriot<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="16",Name="Paula \n  Parente",Designation="Project Lead",ReportingPerson="90",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Paula Parente<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="17",Name="Matti \n  Kenna",Designation="Project Lead",ReportingPerson="4",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Matti Kenna<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="18",Name="Laura \n  Callahan",Designation="Project Lead",ReportingPerson="4",Width =130,Height=130,Fillcolor="#afeeee",Shape="Ellipse",Tooltip="Laura Callahan<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="19",Name="Simon \n  Roel",Designation="Project Lead",ReportingPerson="4",Width =130,Height=130,Fillcolor="#afeeee",Shape="Ellipse",Tooltip="Simon Roel<br/>Project Lead",Color="black",FontSize="20" },
        new RadialTreeModel { Id="20",Name="Thomas \n  Hardy",Designation="Senior S/w Engg",ReportingPerson="12",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Thomas Hardy<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="21",Name="Martín \n  Kloss",Designation="Senior S/w Engg",ReportingPerson="5",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Martín Kloss<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="23",Name="Diego \n  Roel",Designation="Senior S/w Engg",ReportingPerson="7",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Diego Roel<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="24",Name="José \n  Pedro",Designation="Senior S/w Engg",ReportingPerson="8",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="José Pedro<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="25",Name="Manu \n  Pereira",Designation="Senior S/w Engg",ReportingPerson="8",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Manu Pereira<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="26",Name="Annette \n Roel",Designation="Senior S/w Engg",ReportingPerson="25",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Annette Roel<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="27",Name="Catherine \n  Kaff",Designation="Senior S/w Engg",ReportingPerson="8",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Catherine Kaff<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="28",Name="Lúcia \n  Carvalho",Designation="Senior S/w Engg",ReportingPerson="12",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Lúcia Carvalho<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="29",Name="Alej \n  Camino",Designation="Senior S/w Engg",ReportingPerson="13",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Alej Camino<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="30",Name="Liu \n  Wong",Designation="Senior S/w Engg",ReportingPerson="14",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Liu Wong<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="31",Name="Karin \n  Josephs",Designation="Senior S/w Engg",ReportingPerson="14",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Karin Josephs<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="33",Name="Pirkko \n  King",Designation="Senior S/w Engg",ReportingPerson="17",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Pirkko King<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="34",Name="Karl \n  Jablonski",Designation="Senior S/w Engg",ReportingPerson="18",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Karl Jablonski<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="35",Name="Zbyszek \n  Yang",Designation="Senior S/w Engg",ReportingPerson="19",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Zbyszek Yang<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="36",Name="Nancy",Designation="Senior S/w Engg",ReportingPerson="5",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Nancy<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="37",Name="Anne",Designation="Senior S/w Engg",ReportingPerson="6",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Anne<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="38",Name="Isabel \n  Castro",Designation="Senior S/w Engg",ReportingPerson="7",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Isabel Castro<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="39",Name="Nardo \n  Batista",Designation="Senior S/w Engg",ReportingPerson="9",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Nardo Batista<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="40",Name="Rene \n  Phillips",Designation="Senior S/w Engg",ReportingPerson="16",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Rene Phillips<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="41",Name="Rita \n  Pfalzheim",Designation="Senior S/w Engg",ReportingPerson="9",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Rita Pfalzheim<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="42",Name="Janete \n  Limeira",Designation="Senior S/w Engg",ReportingPerson="11",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Janete Limeira<br/>Senior S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="43",Name="Christina \n kaff",Designation="S/w Engg",ReportingPerson="20",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Christina kaff<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="44",Name="Peter \n  Franken",Designation="S/w Engg",ReportingPerson="21",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Peter Franken<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="45",Name="Carlos \n  Schmitt",Designation="S/w Engg",ReportingPerson="23",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Carlos Schmitt<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="46",Name="Yoshi \n  Wilson",Designation="S/w Engg",ReportingPerson="23",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Yoshi Wilson<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="47",Name="Jean \n  Fresnière",Designation="S/w Engg",ReportingPerson="24",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Jean Fresnière<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="48",Name="Simon \n  Roel",Designation="S/w Engg",ReportingPerson="25",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Simon Roel<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="52",Name="Palle \n  Ibsen",Designation="S/w Engg",ReportingPerson="29",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Palle Ibsen<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="53",Name="Lúcia \n  Carvalho",Designation="S/w Engg",ReportingPerson="30",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Lúcia Carvalho<br/>S/w Engg",Color="black",FontSize="20" },
        new RadialTreeModel { Id="54",Name="Hanna \n  Moos",Designation="Project Trainee",ReportingPerson="30",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Hanna Moos<br/>Project Trainee",Color="black",FontSize="20"},
        new RadialTreeModel { Id="55",Name="Peter \n  Citeaux",Designation="Project Trainee",ReportingPerson="33",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Peter Citeaux<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="56",Name="Elizabeth \n  Mary",Designation="Project Trainee",ReportingPerson="33",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Elizabeth Mary<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="57",Name="Victoria \n  Ash",Designation="Project Trainee",ReportingPerson="34",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Victoria Ash<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="58",Name="Janine \n Labrune",Designation="Project Trainee",ReportingPerson="35",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Janine Labrune<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="60",Name="Carine \n Schmitt",Designation="Project Trainee",ReportingPerson="11",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Carine Schmitt<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="61",Name="Paolo \n Accorti",Designation="Project Trainee",ReportingPerson="38",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Paolo Accorti<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="62",Name="André \n Fonseca",Designation="Project Trainee",ReportingPerson="41",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="André Fonseca<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="63",Name="Mario \n Pontes",Designation="Project Trainee",ReportingPerson="6",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Mario Pontes<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="64",Name="John \n Steel",Designation="Project Trainee",ReportingPerson="7",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="John Steel<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="65",Name="Renate \n Jose",Designation="Project Trainee",ReportingPerson="42",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Renate Jose<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="66",Name="Jaime \n Yorres",Designation="Project Trainee",ReportingPerson="20",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Jaime Yorres<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="67",Name="Alex \n Feuer",Designation="Project Trainee",ReportingPerson="21",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Alex Feuer<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="70",Name="Helen \n Marie",Designation="Project Trainee",ReportingPerson="24",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Helen Marie<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="73",Name="Sergio \n roel",Designation="Project Trainee",ReportingPerson="37",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Sergio roel<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="75",Name="Janete \n Limeira",Designation="Project Trainee",ReportingPerson="29",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Janete Limeira<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="76",Name="Jonas \n Bergsen",Designation="Project Trainee",ReportingPerson="18",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Jonas Bergsen<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="77",Name="Miguel \n Angel",Designation="Project Trainee",ReportingPerson="18",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Miguel Angel<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="80",Name="Helvetis \n Nagy",Designation="Project Trainee",ReportingPerson="34",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Helvetis Nagy<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="81",Name="Rita \n Müller",Designation="Project Trainee",ReportingPerson="35",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Rita Müller<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="82",Name="Georg \n Pipps",Designation="Project Trainee",ReportingPerson="36",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Georg Pipps<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="83",Name="Horst \n Kloss",Designation="Project Trainee",ReportingPerson="37",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Horst Kloss<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="84",Name="Paula \n Wilson",Designation="Project Trainee",ReportingPerson="38",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Paula Wilson<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="85",Name="Jose \n Michael",Designation="Project Trainee",ReportingPerson="37",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Jose Michael<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="86",Name="Mauri \n Moroni",Designation="Project Trainee",ReportingPerson="40",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Mauri Moroni<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="87",Name="Michael \n Holz",Designation="Project Trainee",ReportingPerson="41",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Michael Holz<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="88",Name="Alej \n Camino",Designation="Project Trainee",ReportingPerson="42",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Alej Camino<br/>Project Trainee",Color="black",FontSize="20" },
        new RadialTreeModel { Id="89",Name="Jytte Petersen",Designation="Project Manager",ReportingPerson="parent",Width =130,Height=130,Shape="Rectangle",Fillcolor="#f8ab52",Tooltip="Jytte Petersen<br/>Project Manager",Color="black",FontSize="20" },
        new RadialTreeModel { Id="90",Name="Mary Saveley",Designation="Project Manager",ReportingPerson="parent",Width =130,Height=130,Shape="Rectangle",Fillcolor="#f8ab52",Tooltip="Mary Saveley<br/>Project Manager",Color="black",FontSize="20" },
        new RadialTreeModel { Id="91",Name="Robert King",Designation="Project Manager",ReportingPerson="parent",Width =130,Height=130,Shape="Rectangle",Fillcolor="#f8ab52",Tooltip="Robert King<br/>Project Manager",Color="black",FontSize="20" },
        new RadialTreeModel { Id="95",Name="Roland \n Mendel",Designation="CSR",ReportingPerson="19",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Roland Mendel<br/>CSR",Color="black",FontSize="20" },
        new RadialTreeModel { Id="98",Name="Helen \n Bennett",Designation="SR",ReportingPerson="42",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Helen Bennett<br/>SR",Color="black",FontSize="20" },
        new RadialTreeModel { Id="99",Name="Carlos \n Nagy",Designation="SR",ReportingPerson="42",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Carlos Nagy<br/>SR",Color="black",FontSize="20" },
        new RadialTreeModel { Id="100",Name="Felipe \n Kloss",Designation="SR",ReportingPerson="77",Width =100,Height= 100,Shape="Ellipse",Fillcolor="#afeeee",Tooltip="Felipe Kloss<br/>SR",Color="black",FontSize="20" },
    };
    DiagramLayout Layout = new DiagramLayout()
    {
        Type = LayoutType.RadialTree,
        VerticalSpacing = 30,
        HorizontalSpacing = 20,
        Root = "Category"
    };

}
